﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row" style="margin-top:20px;">
    <div class="col-xs-12">
        <div class="panel panel-default">
            <div class="panel-heading">三级联动</div>
            <div class="panel-body">
                <div class="form-group">
                    <label>省：</label>
                    <select class="form-control" id="selProvince" data-bind="template: { name: 'areaTemplate', foreach: ProvinceList }"></select>
                </div>
                <div class="form-group">
                    <label>市：</label>
                    <select class="form-control" id="selCity" data-bind="template: { name: 'areaTemplate', foreach: CityList }"></select>
                </div>
                <div class="form-group">
                    <label>区：</label>
                    <select class="form-control" id="selCounty" data-bind="template: { name: 'areaTemplate', foreach: CountyList }"></select>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script type="text/html" id="areaTemplate">
        <option data-bind="attr: { value: Id },html: AreaName"></option>
    </script>
    <script type="text/javascript">
        var ViewModel = function () {
            var self = this;
            self.ProvinceList = ko.observableArray();
            self.CityList = ko.observableArray();
            self.CountyList = ko.observableArray();
        }
        var AreaModel = function () {
            var self = this;
            self.Id = ko.observable();
            self.AreaName = ko.observable();
        }
        function getAreaData(dataList, Id) {
            $.ajax({
                cache: false,
                type: 'get',
                data: { parentId: Id },
                dataType: "json",
                url: "/Home/GetAreaList",
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert(errorThrown, { icon: 0 });
                },
                success: function (data) {
                    if (data && data.length > 0) {
                        dataList.push(new AreaModel());
                        $.each(data, function (i, item) {
                            var area = new AreaModel();
                            area.Id(item.Id);
                            area.AreaName(item.AreaName);
                            dataList.push(area);
                        });
                    }
                }
            });
        }

        $(document).ready(function () {
            $("#selProvince").change(function () {
                mViewModel.CityList.removeAll();
                mViewModel.CountyList.removeAll();
                getAreaData(mViewModel.CityList, $(this).val());
            });
            $("#selCity").change(function () {
                mViewModel.CountyList.removeAll();
                getAreaData(mViewModel.CountyList, $(this).val());
            });

            mViewModel = new ViewModel();
            ko.applyBindings(mViewModel);
            getAreaData(mViewModel.ProvinceList, "0");
        });
    </script>
}

